<template>
  <div class="sendlist-page">
    <div class="header">
      <div style="display: inline-block">
        <span style="margin-right: 15px">发送记录</span>
        <el-button
          size="mini"
          type="success"
          icon="el-icon-camera"
          @click="toView"
          >查看明细
        </el-button>
      </div>
    </div>
    <div class="body">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-align="center"
        height="700"
        :highlight-selection-row="true"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>

        <el-table-column prop="FCONTACT" label="联系人" align="center">
        </el-table-column>
        <!-- <el-table-column prop="address" label="发送列表" align="center">
        </el-table-column> -->
        <!-- <el-table-column prop="zip" label="主题" align="center">
        </el-table-column> -->
        <el-table-column prop="FNAME" label="供应商" align="center">
        </el-table-column>
        <el-table-column prop="Email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column prop="Remark" label="备注" align="center">
        </el-table-column>
      </el-table>
    </div>

    <div class="dialog">
      <el-dialog
        title="信息"
        :visible.sync="isShow"
        width="60%"
        :before-close="handleClose"
      >
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
            prop="date"
            label="单据号"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="物料编码"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="物料名称"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="项目号"
            width="250"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getSupplierListApi } from "@/api/sendlist";
export default {
  data() {
    return {
      searchForm: {},
      isShow: false,
      tableData: [{ date: 1 }, { date: 1 }],
    };
  },
  created() {
    this.getSupplierList();
  },
  methods: {
    async getSupplierList() {
      const res = await getSupplierListApi({
        postpara: {
          posttype: "getSupplierList",
        },
      });
      console.log(res);
      this.tableData = JSON.parse(res.data);
    },
    onSearch() {},
    handleClose() {
      this.isShow = false;
    },
    toView() {
      this.isShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.sendlist-page {
  background-color: #fff;

  .header {
    padding: 30px 20px;
    display: flex;
    justify-content: space-between;
  }

  .body {
    padding: 20px;
  }
  // ::v-deep
  //   .el-table--enable-row-transition
  //   .el-table__body
  //   td.el-table__cell:hover {
  //   background-color: #30b08f;
  // }

  // ::v-deep .el-checkbox__inner {
  //   // background-color: #30b08f;
  //   border-color: #30b08f;
  // }
  // ::v-deep .is-focus:focus {
  //   background-color: #30b08f;
  // }

  // ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  //   background-color: #30b08f;
  // }
  // ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  //   background-color: #30b08f;
  // }
}
</style>